<template>
  <div>
    <div class="head" id="head" style="width: 1000px; ">
      <div id="titlepage">
        <img src="../assets/images/login_bg2.jpg" id="tp_image" alt />
        <input type="file" name multiple onchange="showFileInfo2(this)" />
        <div class="tp_changebtn">
          <svg
            t="1597738484243"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4307"
            width="16"
            height="16"
          >
            <path
              d="M269.44 256l23.296-75.381333A74.666667 74.666667 0 0 1 364.074667 128h295.850666a74.666667 74.666667 0 0 1 71.338667 52.618667L754.56 256H821.333333c64.8 0 117.333333 52.533333 117.333334 117.333333v426.666667c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V373.333333c0-64.8 52.533333-117.333333 117.333334-117.333333h66.773333z m23.605333 64H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333333v426.666667a53.333333 53.333333 0 0 0 53.333334 53.333333h618.666666a53.333333 53.333333 0 0 0 53.333334-53.333333V373.333333a53.333333 53.333333 0 0 0-53.333334-53.333333h-90.378666a32 32 0 0 1-30.570667-22.549333l-30.272-97.930667a10.666667 10.666667 0 0 0-10.186667-7.52H364.074667a10.666667 10.666667 0 0 0-10.186667 7.52l-30.272 97.92A32 32 0 0 1 293.045333 320zM512 725.333333c-88.362667 0-160-71.637333-160-160 0-88.362667 71.637333-160 160-160 88.362667 0 160 71.637333 160 160 0 88.362667-71.637333 160-160 160z m0-64a96 96 0 1 0 0-192 96 96 0 0 0 0 192z"
              p-id="4308"
              fill="#eeeeee"
            />
          </svg>
          编辑封面图片
        </div>
      </div>
      <div id="icon">
        <img :src="`http://localhost:3000/upload/${contentas.headImg}`" id="icon_image" alt />
        <input type="file" name multiple onchange="showFileInfo(this)" />
        <div id="icon_change">
          <svg
            t="1597738484243"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4307"
            width="100"
            height="100"
          >
            <path
              d="M269.44 256l23.296-75.381333A74.666667 74.666667 0 0 1 364.074667 128h295.850666a74.666667 74.666667 0 0 1 71.338667 52.618667L754.56 256H821.333333c64.8 0 117.333333 52.533333 117.333334 117.333333v426.666667c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V373.333333c0-64.8 52.533333-117.333333 117.333334-117.333333h66.773333z m23.605333 64H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333333v426.666667a53.333333 53.333333 0 0 0 53.333334 53.333333h618.666666a53.333333 53.333333 0 0 0 53.333334-53.333333V373.333333a53.333333 53.333333 0 0 0-53.333334-53.333333h-90.378666a32 32 0 0 1-30.570667-22.549333l-30.272-97.930667a10.666667 10.666667 0 0 0-10.186667-7.52H364.074667a10.666667 10.666667 0 0 0-10.186667 7.52l-30.272 97.92A32 32 0 0 1 293.045333 320zM512 725.333333c-88.362667 0-160-71.637333-160-160 0-88.362667 71.637333-160 160-160 88.362667 0 160 71.637333 160 160 0 88.362667-71.637333 160-160 160z m0-64a96 96 0 1 0 0-192 96 96 0 0 0 0 192z"
              p-id="4308"
              fill="#eeeeee"
            />
          </svg>
        </div>
      </div>
      <div id="information">
        <h1 id="nickName">{{contentas.nickName}}</h1>
        <span>
              <svg
                class="change"
                t="1597738385427"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4166"
                width="20"
                height="20"
              >
                <path
                  d="M896 864a32 32 0 0 1 0 64H128a32 32 0 0 1 0-64z m-60.16-733.621333l15.093333 15.093333c45.866667 45.834667 45.866667 120.16 0 166.005333L418.794667 743.338667a160.192 160.192 0 0 1-78.122667 42.986666l-152.245333 34.197334c-23.84 5.365333-44.661333-16.853333-37.749334-40.288l43.338667-146.88a160.042667 160.042667 0 0 1 40.373333-67.925334l435.328-435.050666c45.866667-45.834667 120.245333-45.834667 166.112 0zM636.32 254.304L279.68 610.709333a96.021333 96.021333 0 0 0-24.213333 40.746667l-27.946667 94.656 99.093333-22.261333a96.117333 96.117333 0 0 0 46.869334-25.781334L726.933333 344.842667l-90.602666-90.538667z m78.698667-78.656l-33.397334 33.386667 90.602667 90.538666 33.386667-33.376a53.333333 53.333333 0 0 0 0-75.456l-15.093334-15.093333a53.408 53.408 0 0 0-75.498666 0z"
                  p-id="4167"
                />
              </svg>
              <span id="Signature">编辑个性签名</span>
            </span>
        <div class="collapse-wrap" v-show="isActive">
          <!-- @slot default -->
          <slot></slot>
          <div id="info2">
            <ul id="info2_ul">
              <li>
                <a>性别</a>
                <span id="sex">
                  <svg
                    t="1599733816273"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="1888"
                    width="30"
                    height="30"
                  >
                    <path
                      d="M298.24 759.594667a225.877333 225.877333 0 1 1 319.488-319.445334 225.877333 225.877333 0 0 1-319.445333 319.445334z m30.208-30.165334A183.210667 183.210667 0 1 0 587.52 470.314667a183.210667 183.210667 0 0 0-259.114667 259.114666z"
                      fill="#55585f"
                      p-id="1889"
                    />
                    <path
                      d="M602.624 455.253333a21.333333 21.333333 0 0 1-2.474667-27.221333l2.474667-2.986667 93.184-93.141333a21.333333 21.333333 0 0 1 32.64 27.221333l-2.474667 2.986667-93.184 93.141333a21.333333 21.333333 0 0 1-30.165333 0z"
                      fill="#55585f"
                      p-id="1890"
                    />
                    <path
                      d="M567.68 317.184l0.554667-3.84a21.333333 21.333333 0 0 1 21.845333-16.384l3.84 0.554667 134.698667 31.744 31.744 134.698666a21.333333 21.333333 0 0 1-40.32 13.44l-1.194667-3.626666-25.728-109.056-109.013333-25.685334a21.333333 21.333333 0 0 1-16.256-18.090666l-0.170667-3.754667z"
                      fill="#55585f"
                      p-id="1891"
                    />
                  </svg>
                </span>
              </li>
              <li>
                <a>职业</a>
                <span id="occupy">{{contentas.occupation}}</span>
              </li>
              <li>
                <a>个人简介</a>
                <span>{{contentas.Signature}}</span>
              </li>
            </ul>
          </div>
        </div>

        <p v-if="!isActive" @click="isActive=!isActive" >
          <svg
            class="more"
            t="1597737142479"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2672"
            width="15"
            height="15"
          >
            <path
              d="M512 685.248l-278.624-278.624 45.248-45.248L512 594.752l233.376-233.376 45.248 45.248z"
              fill="#aaaaaa"
              p-id="2673"
            />
          </svg>查看更多个人信息
        </p>
        <p @click="isActive=!isActive" v-if="isActive" class="up"><svg id="svg" t="1599728101182" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2611" width="15" height="15">
                                <path
                                    d="M745.376 662.624L512 429.248l-233.376 233.376-45.248-45.248L512 338.752l278.624 278.624z"
                                    fill="#aaaaaa" p-id="2612"></path>
        </svg>收起</p>
        <router-link active-class="active" to="/UserInfo">
          <div class="infor_changebtn">编辑个人资料</div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import showInfo from "@/router/showInfo.js";

export default {
  data() {
    return {
      isActive: true,
      ownuids:'',
      contentas:''
    };
  },
  created(){
    this.ownuids=this.$store.state.ownUid
    this.$axios.get('/api/personal/getInfos',{params:{uId:this.ownuids}})
                .then(res=>{
                    this.contentas=res.data.data[0]
                    console.log("我是getINFOs")
                })
                .catch(err=>{
                    console.log('err:',err)
                })
  }
};
</script>
<style>
.head {
  background-color: #fff;
  box-shadow: 0 0 5px 2px rgb(204, 217, 235);
  position: relative;
}
.up{
    position: relative;
    left: 180px;
}
#titlepage {
  width: 996px;
  height: 240px;
  /* background-image: url(images/login_bg2.jpg); */
  /* background-size: cover; */
  opacity: 0.9;
  position: relative;
  left: 2px;
  top: 0;
  overflow: hidden;
}

#tp_image {
  width: 996px;
  position: relative;
}
#sex svg{
  margin-top: -15px;
}
.tp_changebtn {
  width: 130px;
  height: 30px;
  border: 1px solid rgb(204, 217, 235);
  border-radius: 10px;
  color: rgb(226, 228, 255);
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  position: absolute;
  right: 5px;
  top: 5px;
  /* margin: 5px; */
  opacity: 0.5;
  z-index: 10;
}

.tp_changebtn svg {
  position: relative;
  top: 3px;
  margin-right: 2px;
}

.tp_changebtn:hover {
  opacity: 0.9;
  cursor: pointer;
}

#icon {
  /* clear: both; */
  width: 180px;
  height: 180px;
  /* background-image: url(images/logo.jpg); */
  background-size: cover;
  opacity: 1;
  float: left;
  position: relative;
  left: 30px;
  top: -60px;
  border-radius: 10px;
  z-index: 1;
  box-shadow: 2px 2px 3px rgb(60, 193, 255), -2px -2px 3px rgb(60, 193, 255);
}

#icon_image {
  width: 180px;
  height: 180px;
  border-radius: 10px;
  position: absolute;
}

#icon_change {
  width: 180px;
  height: 180px;
  background-color: #000;
  float: left;
  border-radius: 10px;
  display: none;
  text-align: center;
  opacity: 0.5;
}

#icon:hover {
  cursor: pointer;
}

#icon_change svg {
  position: relative;
  top: 30px;
}

.head input {
  display: none;
}
#information {
  width: 830px;
  position: relative;
  /* top: 240px; */
  left: 70px;
  padding: 5px;
  display: block;
}
#info1 {
  display: block;
}
#svg {
  position: relative;
  top: -2px;
  left: -3px;
}

#information h1 {
  font-size: 28px;
  margin: 5px 5px;
}

#information span {
  font-size: 16px;
  margin: 5px 6px;
  color: #444;
}

#information p {
  font-size: 13px;
  margin: 25px 5px;
  color: #aaa;
}

#information p:hover {
  cursor: pointer;
}

#information span .change,
.more {
  position: relative;
  top: 3px;
  margin-right: 5px;
}

.infor_changebtn {
  width: 150px;
  height: 40px;
  border: 1px solid rgb(94, 113, 179);
  border-radius: 10px;
  color: rgb(94, 113, 179);
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  float: right;
  position: relative;
  top: -60px;
}
#sex {
  position: relative;
  top: 5px;
}
</style>